<template>
    <el-dialog :title="title + '分组'" :visible.sync="dialogVisible" width="500px" @close='close'>
        <el-form :inline="true" :model="form" :rules="rules" label-width="80px" size="mini" ref="form">
            <el-form-item label="名称" prop="label">
                <el-input v-model="form.label" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input-number v-model="form.sort" controls-position="right" placeholder="请输入排序"></el-input-number>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input
                    type="textarea"
                    :rows="4"
                    placeholder="请输入内容"
                    v-model="form.remark">
                </el-input>
            </el-form-item>
        </el-form>
        <span slot="footer">
            <el-button size="mini" @click='dialogVisible = false'>取 消</el-button>
            <el-button type="primary" size="mini" @click="confirm">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {
        treeEdit
    } from '@/api/treeController'
    export default {
        data() {
            return {
                form:{
                    label:'',
                    sort:undefined,
                    remark:'',
                    parentId:'',
                    id:''
                },
                rules:{
                    label:[
                        { required: true, message: '名称不能为空', trigger: 'blur' },
                    ]
                },
                dialogVisible:false,
                title:'新建'
            }
        },
        methods:{
            open(payload){
                const {type,row} = payload
                 switch (type) {
                    case 'add':
                        this.title = '新建'
                        this.form.parentId = ''
                        break;
                    case 'addChild':
                        this.title = '新建'
                        this.form.parentId = row
                        break;
                    case 'edit':
                        const {label,sort,remark,id} = row
                        this.title = '编辑'
                        this.$nextTick(()=>{
                            this.form.label = label
                            this.form.sort = sort
                            this.form.remark = remark
                            this.form.id = id
                        })
                        break;
                }
                this.dialogVisible = true
            },
            close(){
                this.form.id = ''
                this.$refs.form.resetFields()
            },
            getTreeEdit(data) {
                treeEdit(data).then(res => {
                    if (res.code == 200) {
                        this.dialogVisible = false
                        this.utils.showMsg('添加成功', 'success')
                        this.$emit('addTree')
                    }
                })
            },
            //确定
            confirm(){
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.getTreeEdit(this.form)
                    } else {
                        return false;
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-form-item--mini.el-form-item{
        width: 100%;
        /deep/ .el-form-item__content{
            width: 70%;
        }
        .el-input-number--mini ,.el-input--mini{
            width: 100%;
        }

    }
    /deep/ .el-dialog__body{
        padding: 8px 20px 0 20px;
    }
</style>